// function component(){
//     var element=document.createElement('div');
//     element.innerHTML='Hello Dfei 213';
//     return element;
// }
// document.body.appendChild(component());


import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router , Route , HashRouter, MemoryRouter , Switch , Redirect} from 'react-router-dom';  //引入我们的路由包，这里我们用两个模块，一个是Router（我自己叫它路由器），另一个是Route（我自己叫它路由）
import Dfei from './dfei';
import Dfeib from './dfeib';
import Dfeic from './dfeic';

import Nav from './nav'  //导航组件

import Error from './error' //404组件

ReactDOM.render(
    // <Dfei/>,
    // 增加路由设置。
    <HashRouter basename='demo' forceRefresh={false}>  
        <div>
            <Nav/>
            <Switch>
                <Route exact path="/" component={Dfei} />  
                <Route  path="/Dfeib" component={Dfeib} />
                <Route  path="/Dfeic/:param" component={Dfeic} />
                <Redirect from="/redirect" to="/Dfeib" />
                <Route component={Error} />
            </Switch>
            
        </div>
    </HashRouter>,
    document.getElementById('App')
)

// 个人理解

/**
 * ReactDOM.render函数里面是放组件的渲染
 * 
 * Router  是路由器
 * Route是路由   exact参数代表的是精确匹配
 * 
 * Switch的使用
 *      用来控制做404页面，404页面组件，
 *      应该放在路由的最后面
 *      并且他是没有path的
 * 
 * Redirect的使用
 *      <Redirect from="/redirect" to="/Jspangb" />
 *      from：表示来自于什么链接，也就是当链接是redirect时，我们触发跳转命令。
 *      to：表示要跳转到的链接，这里是跳转到Jspangb的组件中。
 * 
 * basename属性（加前缀）
 *       basename的作用是个我们增加一级导航目录，比如以前的导航目录是：http://localhost:1717/Jspangb  现在想访问同一个页面，但是路径变成            *       http://localhost:1717/demo/Jspangb。这时候就可以使用basename属性来设置。basename属性是放在<router>标签里边的
 * 
 * 
 * 
 * forceRefresh属性(设置这个，路由失效，全部请求服务器)
 *      这个属性的作用是开启或者关闭React Router，也就是说如果你把forceRefresh的值设置成真，它将关闭React路由系统，而真实的去服务器端请求信息。
 *      现在我们把forceRefresh设置成true，你会发现路由已经不能使用了
 *      这个操作经常使用在大型项目，在服务器跳转和ReactRouter切换时使用。比如作一个APP活动页面，第一次请求时我们到服务器端请求整个页面，然后请求后，整个页面*       DOM进行本地缓存，生成React Router实现本地单页应用。 只要设置我们的forceRefresh就可以了。
 * 
 * 
 * 5种路由方式
 *      BrowserRouter：浏览器的路由方式，也是我们一直在学习的路由方式，在开发中最常使用。  （Router）
        HashRouter：在路径前加入#号成为一个哈希值。Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径了。  （带#哈希值的方式，和vue默认一样）
        MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化。
        NativeRouter：经常配合ReactNative使用，多用于移动端，以后ReactNative课程中会详细讲解。
        StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用。
 * */ 